<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-color-selector-bar
                title="标题背景色"
                desc="title-bg-color=xx/颜色值"
                v-model="titleBgColor"
                light
                gradual
                :customize="false"
            ></uxt-color-selector-bar>
            <uxt-bar title="标题" desc="title">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '400rpx' }"
                        v-model="title"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="提示内容" desc="message">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '400rpx' }"
                        v-model="message"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="图标" desc="icon">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '200rpx' }"
                        v-model="icon"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-single-selector-bar
                title="类型"
                desc="type"
                v-model="type"
                :options="types"
            ></uxt-single-selector-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <view class="padding bg-theme text-center round" @click="handleClick">
                    打开对话框
                </view>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtInput,
        uxtSingleSelectorBar,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '对话框',
            title: '提示',
            message: '对话框',
            icon: '',
            types: ['提示框', '确认框'],
            typeValues: ['alert', 'confirm'],
            type: 0,
            titleBgColor: 'theme'
        }
    },
    methods: {
        handleClick(p) {
            let dialog = this.uxtDialog({
                title: this.title,
                message: this.message,
                icon: this.icon,
                titleBgColor: this.titleBgColor
            })
            if (this.type === 0) {
                dialog.alert().then(res => {
                    this.uxtToast({
                        message: '点击了确定'
                    }).show()
                })
            } else {
                dialog.confirm().then(res => {
                    if (res) {
                        this.uxtToast({
                            message: '点击了确定'
                        }).show()
                    } else {
                        this.uxtToast({
                            message: '点击了取消'
                        }).show()
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>
